<template>
  <view class="page page-index">
    <AtNavBar
      :onClickRgIconSt="settingsClick"
      color="#5E8BFF"
      title="护理实习信息化系统"
      rightFirstIconType="settings"
    />
    <scroll-view class="content" :scrollY="true">
    <view class="userInfo">
      <view class="maininfo">
        <view class="rolename">学生</view>
        <view class="detail">
          <view class="realname">{{ userInfo.realname }}</view>
          <view class="username">{{ userInfo.stu_num }}</view>
          <view class="deptname">{{ userInfo.class_name }}</view>
        </view>
      </view>
    </view>

    <Mylist class="mylist" :listArr="SelectedList"></Mylist>
    </scroll-view>

    <AtFab :onClick="onAddClick" class="fab">
      <text class="at-fab__icon at-icon at-icon-add"></text>
    </AtFab>
    <AtFloatLayout
      :isOpened=myopen
      :title="chooseKey == 0 ? '选择实习单位':'选择科室'"
      :onClose="handleClose"
    >
      <AtForm>
        <AtRadio
          :options="unitlist"
          :value="value"
          :onClick="handleRadioChange"
        />
        <view class="btn">
          <AtButton :onClick="goback" type="secondary" class="goback" v-show="chooseKey !== 0">
            <AtIcon value="chevron-left" size="30" color="#5E8BFF"></AtIcon>
            选择实习单位
          </AtButton>
          <AtButton formType="submit" class="submit" type="secondary" :onClick="onSubmit">
            {{ chooseKey == 0 ? "选择科室" : "确认添加" }}
          </AtButton>
        </view>
      </AtForm>
    </AtFloatLayout>
    <AtFloatLayout
      :isOpened=myopen1
      title="修改密码"
      :onClose="handleClose1"
    >
      <AtForm>
        <view class="inputItem">
          <AtIcon value="lock" size="30" color="#898989"></AtIcon>
          <AtInput
            name="oldpwd"
            type="password"
            :min="6"
            :max="20"
            placeholder="请输入原密码"
            :value="student.oldpwd"
            :onChange="handleChange.bind(this,'oldpwd')"
          />
        </view>
        <view class="inputItem">
          <AtIcon value="lock" size="30" color="#5E8BFF"></AtIcon>
          <AtInput
            name="newpwd"
            type="password"
            :value="student.newpwd"
            placeholder="请输入新密码"
            :onChange="handleChange.bind(this,'newpwd')"
          />
        </view>
        <AtButton formType="submit" class="submit1" type="primary" :onClick="sureChangePwd">确认修改</AtButton>
      </AtForm>
    </AtFloatLayout>
    <AtMessage/>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import {mapState} from "vuex"
import Mylist from "../../components/list"

export default {
  components: {Mylist},
  data() {
    return {
      student: {
        oldpwd: "",
        newpwd: "",
      },
      arrlist: [],
      value: '1',
      unitlist: [],
      SelectedList: [],
      myopen: false,
      myopen1: false,
      chooseKey: 0,
      un_id: 0,
      dept_id: 0,
      userInfo: {}
    }
  },
  mounted() {
    this.getUserSelectedList()
    this.getAllList()
    this.userInfo = Taro.getStorageSync("userInfo");

  },
  methods: {
    /**
     * 处理添加修改密码
     * @param value
     */
    settingsClick() {
      this.changepwd();
    },
    handleChange(stateName, value) {
      this.student[stateName] = value;
    },
    handleClose1() {
      this.myopen1 = !this.myopen1;
    },
    changepwd() {
      this.myopen1 = !this.myopen1;
    },
    sureChangePwd() {
      // console.log(this.student)
      if (this.student.newpwd.length < 6 || this.student.newpwd.length > 20) {
        Taro.atMessage({
          message: '密码长度需在6-20之间',
          type: "warning"
        })
        return
      } else if (this.student.oldpwd.length < 6 || this.student.oldpwd.length > 20) {
        Taro.atMessage({
          message: '密码长度需在6-20之间',
          type: "warning"
        })
        return;
      }
      this.ModifyPassword()
    },
    /**
     * 处理添加科室
     * @param value
     */
    // 返回上一级
    goback() {
      this.chooseKey = 0;
      this.chooseOffice(-1)
    },
    handleRadioChange(value) {
      // console.log("" + value)
      try {
        this.value = "" + value
      } catch (e) {
        // console.log(e)
      }
    },
    onSubmit() {
      // console.log(this.value)
      if (this.chooseKey === 0) {
        this.un_id = this.value;
        let myIndex = 0;
        this.unitlist.forEach((el, index) => {
          if (el.value === this.value) {
            myIndex = index
          }
        })
        this.chooseOffice(myIndex)
        this.chooseKey = 1;
        // console.log(this.chooseKey)
      } else {
        this.dept_id = this.value;
        // console.log(this.un_id, this.dept_id)
        this.addDept()
        this.chooseKey = 0;
        this.chooseOffice(-1)
        this.handleClose()
      }
    },
    onAddClick() {
      this.myopen = !this.myopen;
    },
    handleClose() {
      this.myopen = !this.myopen;
      if (this.chooseKey !== 0) {
        this.chooseKey = 0;
        this.chooseOffice(-1)
      }
    },
    chooseOffice(index) {
      if (index === -1) {
        let tempArr = [];
        this.arrlist.forEach((el, index) => {
          tempArr.push({
            label: el.un_name,
            value: el.un_id + ""
          })
        })
        this.value = tempArr[0].value;
        this.unitlist = tempArr;
      } else {
        let tempArr = [];
        this.arrlist[index].dept.forEach((el, index) => {
          tempArr.push({
            label: el.dept_name,
            value: el.dept_id + ""
          })
        })
        this.value = tempArr[0].value;
        this.unitlist = tempArr;
      }
    },
    /**
     * 接口
     * @returns {Promise<void>}
     * @constructor
     */
    async ModifyPassword() {
      let res = await this.$myRequest({
        url: "?s=App.User_Student.ModifyPassword",
        data: {
          password: this.student.oldpwd,
          new_password: this.student.newpwd
        }
      })
      // console.log(res)
      if (res.data.data.is_success === true) {
        Taro.atMessage({
          message: '密码修改成功',
          type: "success"
        })
        this.myopen1 = false;
      }
    },

    async addDept() {
      let res = await this.$myRequest({
        url: "?s=App.Dept.Add",
        data: {
          dept_id: this.dept_id
        }
      })
      // console.log(res)
      if (res.data.ret === 200) {
        await this.getUserSelectedList()
      }
    },
    async getUserSelectedList() {
      let res = await this.$myRequest({
        url: "?s=App.Dept.SelectedList",
      })
      this.SelectedList = res.data.data.list;
      this.$store.state.SelectedList = res.data.data.list;
      Taro.setStorageSync("SelectedList", this.SelectedList)
      // console.log(res.data.data.list)
    },
    async getAllList() {
      let res = await this.$myRequest({
        url: "?s=App.Dept.AllList",
      })
      let tempArr = [];
      res.data.data.list.forEach((el, index) => {
        tempArr.push({
          label: el.un_name,
          value: el.un_id + ""
        })
      })
      this.arrlist = res.data.data.list;
      this.unitlist = tempArr;
    },
  },
}
</script>
<style lang="less" scoped>
.page{
  height: 100vh;
}
.content{
  background-color: #F8F8F8;
  height: calc(100% - 104px); // navbar 84px
  padding-top: 20px;
}

.userInfo {
  box-sizing: border-box;
  height: 6rem;
  width: 13.5rem;
  margin: 0 auto;

  border-radius: 0.375rem;
  background-color: #2185D0;
  padding-left: 2.3rem;
  color: #FFFFFF;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-shadow: 0 0.125rem 0.25rem 0 #888;
  box-shadow: 0 0.125rem 0.25rem 0 #888;

  .maininfo {
    flex: 1;
    height: 100%;

    .rolename {
      float: right;
      font-size: 32px;
      width: 78px;
      height: 60px;
      line-height: 60px;
      margin-right: -10px;
      margin-top: 20px;
      background-color: #5aaafa;
      text-align: center;
    }

    .detail {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      line-height: 160%;

      .realname,
      .username,
      .deptname,
      .majorname {
        font-size: 34px;
        overflow: hidden;
      }
    }
  }
}

.mylist{
  margin-top: 20px;
}

.fab {
  position: fixed;
  bottom: 50px;
  right: 50px;
}

.inputItem {
  padding-left: 1rem;
  display: flex;
  margin-left:  1.25rem;
  margin-right:  1.25rem;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 10.25rem;
  margin-top: 1.25rem;
  justify-content: center;
}

.at-form::after{
  border: none;
}

.at-input::after {
  border: none;
}

.submit1 {
  border-radius: 10.25rem;
  margin-top: 1.25rem;
  margin-left:  1.25rem;
  margin-right:  1.25rem;
}

.btn {
  display: flex;
  margin-top: 20px;

  .AtButton {
    width: 112px;
  }
}
.at-input {
  padding: 0.4rem 0;
  background-color: transparent;
}

</style>
